<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>用户登录 - 饰品交易平台</title>
  <style>
    body {
      background-image: url('images/register.jpg'); /* 替换为你的背景图路径 */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      color: #e0e0e0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 400px;
      margin: 100px auto;
      padding: 30px;
      border-radius: 16px;
      background: linear-gradient(
              135deg,
              rgba(255, 255, 255, 0.08),
              rgba(255, 255, 255, 0.02)
      );
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    header h1 {
      margin-bottom: 24px;
      font-weight: 700;
      text-align: center;
      color: #aa9bf9;
    }

    label {
      display: block;
      margin-bottom: 6px;
      font-weight: 600;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px 14px;
      margin-bottom: 20px;
      border: none;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
      color: #eee;
      font-size: 16px;
      box-sizing: border-box;
      backdrop-filter: blur(4px);
    }

    input::placeholder {
      color: #ccc;
    }

    .btn {
      width: 100%;
      padding: 12px 0;
      background: #aa9bf9;
      border: none;
      border-radius: 6px;
      color: #121212;
      font-weight: 700;
      font-size: 18px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .btn:hover {
      background: #8c7ee6;
    }

    .message {
      text-align: center;
      margin-bottom: 20px;
    }

    .success {
      color: #4caf50;
    }

    .error {
      color: #f44336;
    }
  </style>

  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
</head>
<body>

<div class="container" id="app">
  <header>
    <h1>用户登录</h1>
  </header>

  <div v-if="successMessage" class="message success">{{ successMessage }}</div>
  <div v-if="errorMessage" class="message error">{{ errorMessage }}</div>

  <form @submit.prevent="loginUser">
    <label for="userName">用户名</label>
    <input id="userName" type="text" v-model="user.userName" placeholder="请输入用户名" required />

    <label for="userPassword">密码</label>
    <input id="userPassword" type="password" v-model="user.userPassword" placeholder="请输入密码" required />

    <button type="submit" class="btn">登录</button>
  </form>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      user: {
        userName: '',
        userPassword: ''
      },
      successMessage: '',
      errorMessage: ''
    },
    methods: {
      loginUser() {
        const params = new URLSearchParams();
        params.append('name', this.user.userName);
        params.append('password', this.user.userPassword);

        axios.post('/ffub/users/login', params)
                .then(res => {
                  if (res.data && res.data.code === 200) {
                    this.successMessage = '登录成功！';
                    this.errorMessage = '';
                    localStorage.setItem('userName', this.user.userName);
                    localStorage.setItem('userId', res.data.data.userId);
                    setTimeout(() => {
                      window.location.href = 'main.html';
                    }, 1000);
                  } else {
                    this.successMessage = '';
                    this.errorMessage = res.data.msg || '登录失败，请重试。';
                  }
                })
                .catch(() => {
                  this.successMessage = '';
                  this.errorMessage = '服务器请求失败，请稍后重试。';
                });
      }
    }
  });
</script>

</body>
</html>
